<template>
  <el-autocomplete
    :fetch-suggestions="querySearchAsync"
    placeholder="Please input"
    :value-key="props.valueKey"
    clearable
    @select="handleSelect"
    @click="clickSelect"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";

const state = ref("");

interface LinkItem {
  value: string;
  link: string;
}

let records = ref<Record<string, string>[]>([]);

const loadAll = () => {
  return [{ value: "vue", link: "aaa" }];
};

const props = defineProps<{ valueKey: string }>();
let timeout: NodeJS.Timeout;
const querySearchAsync = (
  queryString: string,
  callback: (arg: Record<string, string>[]) => void
) => {
  const results = queryString
    ? (records.value.filter((record) => {
        return (
          record[props.valueKey]
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      }) as Record<string, string>[])
    : (records.value as Record<string, string>[]);
  setTimeout((timeout) => {
    callback(results);
  }, 0);
};
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSelect = (item: LinkItem) => {
  console.log(item);
  console.log("选择触发");
};
const clickSelect = (item: LinkItem) => {
  console.log(item);
  records.value = loadAll();
  console.log(records.value);

  console.log("点击触发");
};

const getRecord = () => {
  records.value = loadAll();
};
getRecord();
</script>
